import { createTheme, PaletteMode, Theme, ThemeOptions } from '@mui/material/styles';

// 定义共享的主题配置
const getDesignTokens = (mode: PaletteMode): ThemeOptions => ({
  palette: {
    mode,
    // 温馨的主色调 - 柔和的蓝紫色
    primary: {
      light: mode === 'light' ? '#8A95FF' : '#A3AEFF',
      main: mode === 'light' ? '#6B73FF' : '#7C84FF',
      dark: mode === 'light' ? '#5B5CCC' : '#6B73FF',
      contrastText: '#fff',
    },
    // 温暖的次要色 - 珊瑚橙色
    secondary: {
      light: mode === 'light' ? '#FFB3A7' : '#FFD4CC',
      main: mode === 'light' ? '#FF9C6E' : '#FFAA7A',
      dark: mode === 'light' ? '#E8825D' : '#FF9C6E',
      contrastText: '#fff',
    },
    // 温和的状态颜色
    error: {
      light: '#FFB3BA',
      main: '#FF8A95',
      dark: '#E67380',
    },
    warning: {
      light: '#FFE0B3',
      main: '#FFA940',
      dark: '#E69530',
    },
    info: {
      light: '#B3D9FF',
      main: '#40A9FF',
      dark: '#2E96E6',
    },
    success: {
      light: '#B7F0B1',
      main: '#52C41A',
      dark: '#46A614',
    },
    // 温馨的背景色
    background: {
      default: mode === 'light' ? '#FAFBFF' : '#121218',
      paper: mode === 'light' ? '#FFFFFF' : '#1F1F25',
    },
    // 柔和的文字颜色
    text: {
      primary: mode === 'light' ? 'rgba(30, 30, 30, 0.87)' : 'rgba(255, 255, 255, 0.9)',
      secondary: mode === 'light' ? 'rgba(80, 80, 80, 0.75)' : 'rgba(255, 255, 255, 0.7)',
      disabled: mode === 'light' ? 'rgba(120, 120, 120, 0.5)' : 'rgba(255, 255, 255, 0.4)',
    },
    // 温和的分割线
    divider: mode === 'light' ? 'rgba(107, 115, 255, 0.08)' : 'rgba(255, 255, 255, 0.08)',
    // 柔和的交互状态
    action: {
      active: mode === 'light' ? 'rgba(107, 115, 255, 0.6)' : 'rgba(124, 132, 255, 0.7)',
      hover: mode === 'light' ? 'rgba(107, 115, 255, 0.04)' : 'rgba(124, 132, 255, 0.08)',
      selected: mode === 'light' ? 'rgba(107, 115, 255, 0.08)' : 'rgba(124, 132, 255, 0.16)',
      disabled: mode === 'light' ? 'rgba(120, 120, 120, 0.3)' : 'rgba(255, 255, 255, 0.3)',
      disabledBackground: mode === 'light' ? 'rgba(107, 115, 255, 0.06)' : 'rgba(255, 255, 255, 0.08)',
    },
  },
  typography: {
    fontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      'Roboto',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
    ].join(','),
    h1: {
      fontWeight: 700,
      fontSize: '2.5rem',
      lineHeight: 1.2,
      letterSpacing: '-0.01562em',
    },
    h2: {
      fontWeight: 700,
      fontSize: '2rem',
      lineHeight: 1.2,
      letterSpacing: '-0.00833em',
    },
    h3: {
      fontWeight: 600,
      fontSize: '1.75rem',
      lineHeight: 1.2,
      letterSpacing: '0em',
    },
    h4: {
      fontWeight: 600,
      fontSize: '1.5rem',
      lineHeight: 1.2,
      letterSpacing: '0.00735em',
    },
    h5: {
      fontWeight: 600,
      fontSize: '1.25rem',
      lineHeight: 1.2,
      letterSpacing: '0em',
    },
    h6: {
      fontWeight: 600,
      fontSize: '1rem',
      lineHeight: 1.2,
      letterSpacing: '0.0075em',
    },
    subtitle1: {
      fontSize: '1rem',
      lineHeight: 1.5,
      letterSpacing: '0.00938em',
    },
    subtitle2: {
      fontSize: '0.875rem',
      lineHeight: 1.5,
      letterSpacing: '0.00714em',
      fontWeight: 500,
    },
    body1: {
      fontSize: '1rem',
      lineHeight: 1.5,
      letterSpacing: '0.00938em',
    },
    body2: {
      fontSize: '0.875rem',
      lineHeight: 1.5,
      letterSpacing: '0.01071em',
    },
    button: {
      fontSize: '0.875rem',
      fontWeight: 500,
      lineHeight: 1.75,
      letterSpacing: '0.02857em',
      textTransform: 'uppercase',
    },
    caption: {
      fontSize: '0.75rem',
      lineHeight: 1.66,
      letterSpacing: '0.03333em',
    },
    overline: {
      fontSize: '0.75rem',
      fontWeight: 500,
      lineHeight: 2.66,
      letterSpacing: '0.08333em',
      textTransform: 'uppercase',
    },
  },
  shape: {
    borderRadius: 8,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: 'none',
          borderRadius: 12,
          padding: '10px 20px',
          fontWeight: 500,
          transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          boxShadow: mode === 'light' ? '0 2px 8px rgba(107, 115, 255, 0.15)' : 'none',
          '&:hover': {
            transform: 'translateY(-1px)',
            boxShadow: mode === 'light' 
              ? '0 4px 16px rgba(107, 115, 255, 0.25)' 
              : '0 4px 16px rgba(124, 132, 255, 0.2)',
          },
        },
        contained: {
          background: mode === 'light' 
            ? 'linear-gradient(135deg, #6B73FF 0%, #8A95FF 100%)'
            : 'linear-gradient(135deg, #7C84FF 0%, #A3AEFF 100%)',
          '&:hover': {
            background: mode === 'light' 
              ? 'linear-gradient(135deg, #5B5CCC 0%, #6B73FF 100%)'
              : 'linear-gradient(135deg, #6B73FF 0%, #8A95FF 100%)',
            boxShadow: mode === 'light' 
              ? '0 6px 20px rgba(107, 115, 255, 0.35)' 
              : '0 6px 20px rgba(124, 132, 255, 0.3)',
          },
        },
        outlined: {
          borderWidth: '1.5px',
          borderColor: mode === 'light' ? '#6B73FF' : '#7C84FF',
          '&:hover': {
            borderWidth: '1.5px',
            backgroundColor: mode === 'light' ? 'rgba(107, 115, 255, 0.05)' : 'rgba(124, 132, 255, 0.1)',
          },
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: 'none',
          borderRadius: 16,
          background: mode === 'light'
            ? 'linear-gradient(145deg, #ffffff 0%, #fafbff 100%)'
            : 'linear-gradient(145deg, #1f1f25 0%, #26262d 100%)',
          boxShadow: mode === 'light'
            ? '0 4px 20px rgba(107, 115, 255, 0.08), 0 1px 3px rgba(107, 115, 255, 0.05)'
            : '0 4px 20px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(124, 132, 255, 0.1)',
          border: mode === 'light' 
            ? '1px solid rgba(107, 115, 255, 0.05)' 
            : '1px solid rgba(124, 132, 255, 0.1)',
        },
        elevation1: {
          boxShadow: mode === 'light'
            ? '0 2px 12px rgba(107, 115, 255, 0.06), 0 1px 4px rgba(107, 115, 255, 0.04)'
            : '0 2px 12px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(124, 132, 255, 0.08)',
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 20,
          overflow: 'hidden',
          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
          border: mode === 'light' 
            ? '1px solid rgba(107, 115, 255, 0.08)' 
            : '1px solid rgba(124, 132, 255, 0.12)',
          background: mode === 'light'
            ? 'linear-gradient(145deg, #ffffff 0%, #fafbff 100%)'
            : 'linear-gradient(145deg, #1f1f25 0%, #26262d 100%)',
          boxShadow: mode === 'light'
            ? '0 4px 20px rgba(107, 115, 255, 0.08)'
            : '0 4px 20px rgba(0, 0, 0, 0.25)',
          '&:hover': {
            transform: 'translateY(-6px) scale(1.02)',
            boxShadow: mode === 'light'
              ? '0 12px 40px rgba(107, 115, 255, 0.15), 0 4px 12px rgba(107, 115, 255, 0.1)'
              : '0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(124, 132, 255, 0.2)',
            borderColor: mode === 'light'
              ? 'rgba(107, 115, 255, 0.2)'
              : 'rgba(124, 132, 255, 0.25)',
          },
        },
      },
    },
    MuiCardContent: {
      styleOverrides: {
        root: {
          padding: '24px',
          '&:last-child': {
            paddingBottom: '24px',
          },
        },
      },
    },
    MuiTextField: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-root': {
            borderRadius: 12,
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
            backgroundColor: mode === 'light' ? 'rgba(107, 115, 255, 0.02)' : 'rgba(124, 132, 255, 0.05)',
            '& .MuiOutlinedInput-notchedOutline': {
              borderColor: mode === 'light' ? 'rgba(107, 115, 255, 0.2)' : 'rgba(124, 132, 255, 0.3)',
            },
            '&:hover': {
              backgroundColor: mode === 'light' ? 'rgba(107, 115, 255, 0.04)' : 'rgba(124, 132, 255, 0.08)',
              '& .MuiOutlinedInput-notchedOutline': {
                borderColor: mode === 'light' ? '#6B73FF' : '#7C84FF',
              },
            },
            '&.Mui-focused': {
              backgroundColor: mode === 'light' ? 'rgba(107, 115, 255, 0.06)' : 'rgba(124, 132, 255, 0.1)',
              '& .MuiOutlinedInput-notchedOutline': {
                borderWidth: '2px',
                borderColor: mode === 'light' ? '#6B73FF' : '#7C84FF',
              },
            },
          },
        },
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          boxShadow: mode === 'light'
            ? '0 1px 3px rgba(0,0,0,0.1)'
            : '0 1px 3px rgba(0,0,0,0.3)',
        },
      },
    },
    MuiSwitch: {
      styleOverrides: {
        root: {
          width: 48,
          height: 28,
          padding: 0,
          '& .MuiSwitch-switchBase': {
            padding: 2,
            transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
            '&.Mui-checked': {
              transform: 'translateX(20px)',
              color: '#fff',
              '& + .MuiSwitch-track': {
                opacity: 1,
                background: mode === 'light' 
                  ? 'linear-gradient(135deg, #6B73FF 0%, #8A95FF 100%)'
                  : 'linear-gradient(135deg, #7C84FF 0%, #A3AEFF 100%)',
              },
              '& .MuiSwitch-thumb': {
                boxShadow: '0 2px 8px rgba(107, 115, 255, 0.3)',
              },
            },
          },
          '& .MuiSwitch-thumb': {
            width: 24,
            height: 24,
            borderRadius: 12,
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
            background: mode === 'light' 
              ? 'linear-gradient(145deg, #ffffff, #f0f0f0)'
              : 'linear-gradient(145deg, #ffffff, #e0e0e0)',
            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
          },
          '& .MuiSwitch-track': {
            borderRadius: 14,
            opacity: 1,
            backgroundColor: mode === 'light' ? '#E0E7FF' : '#404040',
            boxSizing: 'border-box',
            transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
          },
        },
      },
    },
  },
  transitions: {
    easing: {
      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
      easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
    },
    duration: {
      shortest: 150,
      shorter: 200,
      short: 250,
      standard: 300,
      complex: 375,
      enteringScreen: 225,
      leavingScreen: 195,
    },
  },
  zIndex: {
    mobileStepper: 1000,
    speedDial: 1050,
    appBar: 1100,
    drawer: 1200,
    modal: 1300,
    snackbar: 1400,
    tooltip: 1500,
  },
});

// 创建明亮主题
export const lightTheme = createTheme(getDesignTokens('light'));

// 创建暗色主题
export const darkTheme = createTheme(getDesignTokens('dark'));

// 根据模式创建主题的函数
export const createAppTheme = (mode: PaletteMode): Theme => {
  return createTheme(getDesignTokens(mode));
};